<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /* 给父级添加display: flex属性 */
        display: flex;
        width: 800px;
        height: 300px;
        background-color: blue;
        margin: 0 auto;
        /* flex-direction设置主轴方向
            默认值 row 为x轴从左到右
            column 为y轴从上到下
            row-reverse 为x轴从右到左
            column-reverse 为y轴从下到上 */
        flex-direction: row;
        /* justify-content设置主轴上子盒子的排列方式
            默认 flex-start 从头开始
            flex-end 从尾开始
            center 居中对齐
            space-around 平分剩余空间
            space-between 先两边，再平分剩余空间*/
        justify-content: space-between;
        /* flex-wrap 设置子盒子是否换行
            默认 nowrap 不换行，父盒子如果装不下子盒子会缩放子盒子
            wrap 自动换行 */
        flex-wrap: wrap;
        /* flex-wrap: nowrap; */
        /* align-items设置侧轴上子盒子的排列方式（单行）适用于不换行的情况
            默认 flex-start 从头开始
            flex-end 从尾开始
            center 居中对齐
            stretch 拉伸，将子盒子对应方向的大小（宽度、高度）拉伸为父盒子大小,需要子盒子不设置该方向大小 */
        align-items: center;
        /* align-content设置侧轴上子盒子的排列方式（多行）适用于换行的情况
            默认 flex-start 从头开始
            flex-end 从尾开始
            center 居中对齐
            space-around 平分剩余空间
            space-between 先两边，再平分剩余空间
            stretch */
        align-content: space-around;
        /* flex-flow  flex-direction和flex-wrap的复合写法*/
        flex-flow: row nowrap;
      }

      div span {
        width: 150px;
        height: 100px;
        background-color: skyblue;
      }

      /* order属性定义项目的排列顺序
          数值越小，排列越前，默认为0 */
      div span:nth-child(2) {
        order: -1;
      }

      /* align-self设置子盒子自己在侧轴上的排列方式，不影响其他子盒子 */
      div span:nth-child(3) {
        align-self: flex-start;
      }

      /* flex设置子盒子分配父盒子的剩余空间大小
          值可以写百分比 */
      section {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: green;
        margin: 50px auto;
      }

      section span:nth-child(1) {
        width: 100px;
        height: 300px;
        background-color: red;
      }

      section span:nth-child(2) {
        flex: 1;
      }

      section span:nth-child(3) {
        width: 100px;
        height: 300px;
        background-color: red;
      }

      p {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: yellow;
        margin: 50px auto;
      }

      p span {
        flex: 1;
      }

      p span:nth-child(2) {
        flex: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <!-- flex布局（弹性布局）
          通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式
        特点：
            1.如何一个容器都可以设置
            2.添加该属性的父盒子的子盒子的float、clear、vertical-align属性将生效 -->
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
    <section>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </section>
    <p><span>1</span><span>2</span><span>3</span></p>
  </body>
</html>
